<script lang="ts" setup>
import OrderManagement from '@/api/Ordermanagement'
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'
import router from '@/router'
import { QueryParams } from '@/types/public'
import { numberToCurrencyNo } from '@/utils'
import { getorderStatus, getorderType } from './data'
import dateLimt from '@/utils'
import { timeFormat } from '@/utils/formatter'

const input1 = ref('')
const size = ref<'default' | 'large' | 'small'>('default')

//调用接口数据 extends?
interface QueryonePay extends QueryParams {
  userId: string
  orderId?: string
  total?: number
  date: string
  createdTimeBegin?: number
  createdTimeEnd?: number
}

const queryonePay: QueryonePay = reactive({ userId: localStorage.getItem('userId') as string, page: 1, pageSize: 10, date: '' })

const getList = () => {
  OrderManagement.getOnePay(queryonePay).then((res) => {
    tableData.length = 0
    tableData.push(...res.data.data.order)
    queryonePay.total = res.data.data.totalCount
  })
}
getList()

const handleSizeChange = (val: number) => {
  queryonePay.page = 1
  queryonePay.pageSize = val
  getList()
}
const handleCurrentChange = (val: number) => {
  queryonePay.page = val
  getList()
}
let tableData: Array<QueryonePay> = reactive([])
const getOrdernumber = function (row: any, column: any, cellValue: any, index: any) {
  return cellValue
}
const moneyFormat = function (row: any, column: any, cellValue: any, index: any) {
  return '￥' + numberToCurrencyNo(cellValue)
}
const orderTypeFormat = function (row: any, column: any, cellValue: any, index: any) {
  let str = ''
  for (const key in getorderType) {
    if (Object.prototype.hasOwnProperty.call(getorderType, key)) {
      const element = getorderType[key]
      for (const k in element.child) {
        if (Object.prototype.hasOwnProperty.call(element.child, k)) {
          const val = element.child[k]
          if (cellValue === val.value) {
            str = val.text
          }
        }
      }
    }
  }

  return str
}

const findstatus = function (cellValue: any) {
  const status: any = getorderStatus[0].child.find((v: any) => v.value === cellValue)
  return status
}
//路由传参
const toOrder = (orderId: any, createdTime: any, serviceTypeName: any, orderType: any, orderStatus: any, productionSpecDesc: any, price: any) => {
  if (orderStatus == 5 || orderStatus == 4) {
    router.push({
      name: 'cycleFinishedorder',
      query: {
        id: orderId,
        time: createdTime,
        servicetype: serviceTypeName,
        ordertype: orderType,
        status: orderStatus,
        desc: productionSpecDesc,
        shouldpay: price
      }
    })
  } else {
    router.push({
      name: 'cycleTobepaidorder',
      query: {
        id: orderId,
        time: createdTime,
        servicetype: serviceTypeName,
        ordertype: orderType,
        status: orderStatus,
        desc: productionSpecDesc,
        shouldpay: price
      }
    })
  }
}

const cycleFilter = () => {
  queryonePay.createdTimeBegin = new Date(queryonePay.date[0]).getTime()
  queryonePay.createdTimeEnd = new Date(queryonePay.date[1]).getTime()
  queryonePay.page = 1
  getList()
}
</script>

<template>
  <div class="content-box">
    <el-table :row-style="{ height: '34px' }" :data="tableData" style="width: 100%; margin-top: 16px">
      <el-table-column label="订单号">
        <template #default="scope">
          <el-button style="font-size: 14px" link type="primary" size="small" @click="
            toOrder(
              scope.row.orderId,
              scope.row.createdTime,
              scope.row.serviceTypeName,
              scope.row.orderType,
              scope.row.orderStatus,
              scope.row.productionSpecDesc,
              scope.row.price
            )
            ">{{ scope.row.orderId }}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="serviceTypeName" label="产品类型" />
      <el-table-column prop="orderType" label="订单类型" :formatter="orderTypeFormat" />
      <el-table-column prop="createdTime" label="创建时间" :formatter="timeFormat" />
      <el-table-column prop="paymentTime" label="支付时间" :formatter="timeFormat" />
      <el-table-column label="订单状态">
        <template #default="scope">
          <div class="Statusline">
            <div class="finishedcircle" :style="{ background: findstatus(scope.row.orderStatus).color }"></div>
            <span>{{ findstatus(scope.row.orderStatus).text }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="订单金额" :formatter="moneyFormat" />
      <el-table-column fixed="right" label="操作" width="150">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="
            toOrder(
              scope.row.orderId,
              scope.row.createdTime,
              scope.row.serviceTypeName,
              scope.row.orderType,
              scope.row.orderStatus,
              scope.row.productionSpecDesc,
              scope.row.price
            )
            ">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination background :current-page="queryonePay.page" :page-size="queryonePay.pageSize"
      :page-sizes="[5, 10, 20, 100]" layout="total, sizes, prev, pager, next, jumper" :total="queryonePay.total"
      @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  </div>
</template>

<style lang="scss" scoped>
.content-box {
  background: $blank-color;

  .Statusline {
    display: flex;
    align-items: center;

    .finishedcircle {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin-right: 10px;
    }
  }

  .time-line {
    height: 49px;
    margin-top: 20px;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    color: $text-color;
    justify-content: space-between;

    .demo-date-picker {
      display: flex;
      align-items: center;
      width: 600px;
      padding: 0;
      flex-wrap: wrap;
    }

    .el-button--primary.is-link,
    .el-button--primary.is-plain,
    .el-button--primary.is-text {
      --el-button-bg-color: white;
      --el-button-border-color: #0247ea;
      --el-button-hover-bg-color: #e5ecfd;
      height: 34px;
      width: 100px;
      border-radius: 0px;
    }

    :deep(.el-input__wrapper) {
      border-radius: 0px;
      height: 34px;
      width: 180px;
    }
  }

  :deep(thead tr th) {
    background-color: #f6f7fa !important;
    height: 34px;
  }

  :deep(.el-table .el-table__cell) {
    padding: 0;
  }
}
</style>
